<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>JSViz Force Directed Layout: Modeling XML Data</title>

		<!--	
			Licensed under the Apache License, Version 2.0 (the "License");
			you may not use this file except in compliance with the License.
 			You may obtain a copy of the License at
 
				http://www.apache.org/licenses/LICENSE-2.0

 			Unless required by applicable law or agreed to in writing, software
 			distributed under the License is distributed on an "AS IS" BASIS,
 			WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 			See the License for the specific language governing permissions and
 			limitations under the License.

 			Author: Kyle Scholz      http://kylescholz.com/
 			Copyright: 2006-2007
 		-->
		
		<!-- JSViz Libraries -->
		<script language="JavaScript" src="../physics/ParticleModel.js"></script>
		<script language="JavaScript" src="../physics/Magnet.js"></script>
		<script language="JavaScript" src="../physics/Spring.js"></script>
		<script language="JavaScript" src="../physics/Particle.js"></script>
		<script language="JavaScript" src="../physics/RungeKuttaIntegrator.js"></script>
		
		<script language="JavaScript" src="../layout/graph/ForceDirectedLayout.js"></script>
		<script language="JavaScript" src="../layout/view/GraphView.js"></script>

		<script language="JavaScript" src="../util/Timer.js"></script>
		<script language="JavaScript" src="../util/EventHandler.js"></script>

		<script language="JavaScript" src="../io/DataGraph.js"></script>
		<script language="JavaScript" src="../io/HTTP.js"></script>
		<script language="JavaScript" src="../io/XMLTreeLoader.js"></script>

		<script language="JavaScript">
			// Select rendering platform
			var q = document.location.href.indexOf('?');
			if (q) {
				var qstring = document.location.href.substring(q);
				var m;
				m = qstring.match("[?&]nodes=([^&]*)");
				var renderNodes = m ? m[1] : "canvas";
				m = qstring.match("[?&]edges=([^&]*)");
				var renderEdges = m ? m[1] : "canvas";
			}

			function setOption(select, value) {
				for(var i=0; i<select.options.length; i++) {
					if(select.options[i].value==value) {
						select.options[i].selected = true;
						break;
					}
				}
			}

			function init() {
				setOption(document.getElementById('nodes'), renderNodes);
				setOption(document.getElementById('edges'), renderEdges);
	
				var layout = new ForceDirectedLayout( document.body,
					{	skew: true,
						useCanvas: true,
						useVector: true,
						edgeRenderer: renderEdges
					});
				layout.view.skewBase=575;
				layout.setSize();

				layout.config._default = {
					model: function( dataNode ) {
						return {
							mass: .5
						}
					},
					view: function( dataNode, modelNode ) {
						if(renderNodes=="canvas"  && layout.view.supportCanvas) {
							return( function(particle) {
								this.node_twod.strokeStyle = dataNode.color;
								this.node_twod.fillStyle = dataNode.color;
								this.node_twod.beginPath();
								this.node_twod.arc(
									(particle.positionX*this.skewX) + this.centerX,
									(particle.positionY*this.skewY) + this.centerY,
									6, 0,
									Math.PI*2,true); // Outer circle
								this.node_twod.stroke();
								this.node_twod.fill();
							} );
						} else if(renderNodes=="vector" && layout.view.supportVector) {
							var nodeElement = document.createElementNS("http://www.w3.org/2000/svg", "circle");
							nodeElement.setAttribute('stroke', '#888888');
							nodeElement.setAttribute('stroke-width', '.25px');
							nodeElement.setAttribute('fill', dataNode.color);
							nodeElement.setAttribute('r', 6 + 'px');
							nodeElement.onmousedown =  new EventHandler( layout, layout.handleMouseDownEvent, modelNode.id )
							return nodeElement;						
						} else {
							var nodeElement = document.createElement( 'div' );
							nodeElement.style.position = "absolute";
							nodeElement.style.width = "12px";
							nodeElement.style.height = "12px";
							
							var color = dataNode.color.replace( "#", "" );
							nodeElement.style.backgroundImage = "url(http://kylescholz.com/cgi-bin/bubble.pl?title=&r=12&pt=8&b=" + color + "&c=" + color + ")";
							nodeElement.innerHTML = '<img width="1" height="1">';
							nodeElement.onmousedown =  new EventHandler( layout, layout.handleMouseDownEvent, modelNode.id )
							return nodeElement;
						}
					}
				}

        		layout.forces.spring._default = function( nodeA, nodeB, isParentChild ) {
					if (isParentChild) {
						return {
							springConstant: 0.3,
							dampingConstant: 0.2,
							restLength: 20
						}
					} else {
						return {
							springConstant: 0.15,
							dampingConstant: 0.2,
							restLength: 30
						}
					}
				}
				
				layout.forces.spring['A'] = {};
        		layout.forces.spring['A']['B'] = function( nodeA, nodeB, isParentChild ) {
					return {
						springConstant: 0.4,
						dampingConstant: 0.2,
						restLength: 30
					}
				}

        		layout.forces.magnet = function() {
					return {
						magnetConstant: -4000,
						minimumDistance: 20
					}
				}
				
				// 
				layout.viewEdgeBuilder = function( dataNodeSrc, dataNodeDest ) {
					return {
						'html_pixels': 5,
						'stroke': dataNodeSrc.color,
						'stroke-width': '2px',
						'stroke-dasharray': '2,4'
					}
				}

				var loader = new XMLTreeLoader( layout.dataGraph );
				loader.load( "treedata1.xml" );

				var buildTimer = new Timer( 0 );
				buildTimer.subscribe( layout );
				buildTimer.start();
			}
		</script>
		
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				font-family: sans-serif;
			}
			#settings {
				position: absolute;
				z-Index: 100;
			}
		</style>
	</head>
	<body onload="init()">
		<table id="settings"><form><tr>
			<td>Render Nodes with </td>
			<td>
				<select id="nodes" name="nodes">
					<option value=canvas>canvas</option>
					<option value=vector>vector</option>
					<option value=html>html</option>
				</select>
			</tr><tr>
			<td>Render Edges with </td>
			<td>
				<select id="edges" name="edges">
					<option value=canvas>canvas</option>
					<option value=vector>vector</option>
					<option value=html>html</option>
				</select>
		</tr><tr>
			<td colspan=2><input type=submit></td>
		</tr></form></table>
		<div id="debug" style="position:absolute"></div>
	</body>
</html>